<template>
  <n-config-provider v-bind="getGlobalComponentSize">
    <fx-naive-provider>
      <router-view v-slot="{Component,route}">
        <component :is="Component"></component>
      </router-view>
    </fx-naive-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import FxNaiveProvider from '@/naive/provider';
// theme
import {createTheme,darkTheme} from 'naive-ui';
// locale & dateLocale
import {zhCN, dateZhCN} from 'naive-ui';

// 获取全局组件大小
const getGlobalComponentSize = computed(() => {
  return {
    // theme: darkTheme, // createTheme([])
    theme: createTheme([]),
    locale: zhCN,
    dateLocale: dateZhCN
  };
});

</script>

<style lang="scss">

#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: white;
  box-sizing: border-box;
  overflow: auto;
}

.n-config-provider{
  width: 100%;
  height: 100%;
}

/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.fade-enter-active {
  transition: all 0.5s ease-out;
}

.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

</style>
